<template>
  <div class="container">
    <Header v-if="isHome" v-bind:isBack="isBack" :title="title"></Header>
    <div class="message">
      <div class="name">
        <span class="left fs-36">姓名：</span>
        <input type="text" class="right" v-model="name" placeholder="请填写姓名" />
      </div>
      <div class="phone">
        <span class="left fs-36">电话：</span>
        <input type="number" class="right" v-model="phone" placeholder="请填写联系方式" />
      </div>
      <div class="area">
        <span class="left fs-36">赛区：</span>
        <div class="checkPic">
          <input type="text" class="right" v-model="area" placeholder="请选择省份" />
          <img :src="choose" alt @click="chooseArea" />
        </div>
      </div>
      <div class="introduction">
        <span class="left fs-36">简介：</span>
        <div class="textArea">
          <textarea
            name
            id
            cols="30"
            rows="6"
            @input="descInput"
            v-model="desc"
            maxlength="200"
            placeholder="请描述一下自己奥~"
            onkeyup="this.value=this.value.substring(0, 200)"
          ></textarea>
          <span class="number fs-24">{{txtVal}}&nbsp;/&nbsp;200</span>
        </div>
      </div>
      <div class="upload-video">
        <span class="left fs-36">上传视频：</span>
        <div class="video-mes">
          <div class="video-box">
            <img :src="camera" alt />
            <input type="file" :accept="filestype" @change="uploadVideo" />
          </div>
          <div class="video" v-show="videoUrl">
            <video :src="videoUrl" :poster="videoPic" controls></video>
          </div>
        </div>
      </div>
      <div class="tips fs-28">注：如有其他资料可发至邮箱******</div>
    </div>
    <div class="bottom">
      <div class="btn fs-32" @click="saveMes">报名</div>
    </div>
    <!-- 地区选择模态框 -->
    <div class="chooseArea" v-if="isShowArea">
      <div class="space-between padding-24">
        <p @click="isShowArea=false">取消</p>
        <p @click="surecity">确定</p>
      </div>
      <mt-picker :slots="myAddressSlots" @change="onMyAddressChange" class="city-picker"></mt-picker>
    </div>
  </div>
</template>

<script>
import myaddress from "../../../static/address.json"; //引入省市区数据
export default {
  name: "sign-up",
  data() {
    return {
      title: "填写报名信息",
      id:null,//海选活动id
      isBack: true,
      isHome: true,
      desc: null, //简介的内容
      txtVal: 0,
      camera: require("@/assets/index/camera.png"),
      choose: require("@/assets/index/check-area.png"),
      name: "",
      phone: "",
      area: "",
      videoMes: "",
      filestype: "video/*",
      isShowArea: false,
      myaddress: "",
      videoUrl: "",
      videoPic: "",
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 8,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "center"
        }
      ]
    };
  },
  components: {},
  methods: {
    // 点击了选择地区图标
    chooseArea() {
      this.isShowArea = true;
    },
    // 点击了确定按钮
    surecity() {
      this.isShowArea = false;
      if (this.myaddress[0] && this.myaddress[1] && this.myaddress[2]) {
        this.area = `${this.myaddress[0]}${this.myaddress[1]}${
          this.myaddress[2]
        }`;
      } else {
        this.AlertWin("请选择正确的区域！");
      }

      //this.area=this.myaddress
    },
    // 选择地区
    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
        this.myaddress = values;
      }
    },
    // 计算剩下的字数
    descInput() {
      this.txtVal = this.desc.length;
    },
    // 点击了报名按钮
    saveMes() {
      if (!this.name) {
        this.AlertWin("请输入姓名");
        return;
      }
      if (!this.phone) {
        this.AlertWin("请输入手机号");
        return;
      }
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      if (reg.test(this.phone)) {
      } else {
        this.AlertWin("请输入正确的手机号格式");
        return;
      }
      if (!this.area) {
        this.AlertWin("请选择地区信息");
        return;
      }
      if (!this.desc) {
        this.AlertWin("请输入简介信息");
        return;
      }
      if (!this.videoUrl) {
        this.AlertWin("请上传视频信息");
        return;
      }

      const url = this.$host1 + `home/audition/writeEnterMsg`;
      var params = {
        audition_activity_vote_time_id:this.id,
        name:this.name,
        mobile:this.phone,
        game_area:this.area,
        contents:this.desc,
        video:this.videoUrl
      }
      this.$axios.post(url,params).then(res=>{
        console.log(res.data.data,'---res.data.data--');
      if(res.data.code == 200){
        this.AlertWin('您已成功报名，请耐心等待审核');
        this.$router.go(-1);
      }else{
        this.AlertWin(res.data.message);
      }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    },
    // 上传视频
    uploadVideo(e) {
      console.log(e, "--e");
      var formdata1 = new FormData(); // 创建form对象
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      reader.onload = function(e) {};
      formdata1.append("file", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      var url = this.$host1 + `upload_video`;
      this.$axios.post(url, formdata1, config).then(response => {
        if (response.status == 200) {
          // console.log(response, "--response");
          this.videoUrl = response.data.dest;
          this.videoPic = response.data.video_cover;
        } else {
          this.common.AlertWin(response.data.mes);
        }
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100vh;
  padding-top: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .message {
    width: 100%;
    background-color: #fff;
    padding: 0.25rem 0.24rem 0;
    box-sizing: border-box;
    flex-grow: 8;
    .name,
    .phone,
    .area,
    .introduction,
    .upload-video {
      margin-bottom: 0.24rem;
      .left {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        margin-right: 0.25rem;
      }
      .right {
        width: 5rem;
        height: 0.8rem;
        color: #444;
        font-size: 0.32rem;
        border: 0.01rem solid rgba(233, 233, 233, 1);
        border-radius: 0.06rem;
        text-indent: 0.36rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.32rem;
        color: #999999;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }
    .area {
      display: flex;
      .checkPic {
        margin-left: 0.1rem;
        position: relative;
        img {
          width: 0.26rem;
          height: 0.15rem;
          position: absolute;
          right: 0.3rem;
          top: 0.4rem;
        }
        input {
        }
      }
    }
    .introduction {
      display: flex;
      position: relative;
      .textArea {
        width: 5rem;
        height: 3rem;
        margin-left: 0.1rem;
        border: 0.01rem solid rgba(233, 233, 233, 1);
        border-radius: 0.06rem;
        textarea {
          margin-top: 0.1rem;
          margin-left: 0.1rem;
          width: 4.8rem;
          height: 2rem;
          font-weight: 500;
          font-size: 0.32rem;
          text-indent: 0.36rem;
          padding-top: 0.3rem;
          border: 0;
          outline: none;
          resize: none;
        }
        textarea:focus {
          border: 0;
          border-radius: 0.06rem;
        }
        .number {
          position: absolute;
          right: 0.75rem;
          bottom: 0.3rem;
          z-index: 999;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
    .upload-video {
      .left {
        margin-bottom: 0.36rem;
        display: block;
      }
      .video-mes {
        display: flex;
        .video-box {
          position: relative;
          width: 1.89rem;
          height: 1.6rem;
          background: rgba(245, 245, 245, 1);
          img {
            width: 0.5rem;
            height: 0.41rem;
            position: absolute;
            transform: translate(-50%);
            left: 50%;
            top: 35%;
          }
          input {
            width: 100%;
            height: 100%;
            opacity: 0;
          }
        }
        .video {
          width: 3rem;
          max-height: 3rem;
          margin-left: 1rem;
          video {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .tips {
      font-weight: 500;
      color: rgba(244, 67, 73, 1);
    }
  }
  .bottom {
    width: 100%;
    height: 1rem;
    background-color: #fff;
    .btn {
      width: 7.02rem;
      height: 0.7rem;
      margin: 0 auto;
      line-height: 0.7rem;
      text-align: center;
      background: rgba(84, 4, 121, 1);
      border-radius: 0.35rem;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }
  }

  // 地区选择模态框
  .chooseArea {
    position: fixed;
    z-index: 999;
    background-color: #fff;
    bottom: 0;
    width: 100%;
    height: 5rem;
    overflow: hidden;
    box-shadow: 0rem 0rem 0.1rem 0rem rgba(172, 172, 172, 0.23);
    .space-between {
      height: 0.8rem;
      color: rgba(84, 4, 121, 1);
      border-bottom: 0.01rem solid #e9e9e9;
    }
  }
}
</style>
